@charset "utf-8";

@body-margin: 10px;
@body-paddig: 20px;

body {
  padding: @body-paddig 0 0 @body-paddig;
}

/*页面上画出三角形{begin}*/

.triangle(top,@w:5px,@c:green) {
  border-width: @w;
  border-color: transparent transparent @c transparent;
  border-style: dashed dashed solid dashed;
}

.triangle(bottom,@w:5px,@c:green) {
  border-width: @w;
  border-color: @c transparent transparent transparent;
  border-style: solid dashed dashed dashed;
}

.triangle(right,@w:5px,@c:green) {
  border-width: @w;
  border-color: transparent transparent transparent @c;
  border-style: dashed dashed dashed solid;
}

.triangle(left,@w:5px,@c:green) {
  border-width: @w;
  border-color: transparent @c transparent transparent;
  border-style: dashed solid dashed dashed;
}

.triangle(@_,@w:5px,@c:green) {
  width: 0;
  height: 0;
  overflow: hidden;
}

.sanjiao {
  .triangle(right, 20px);
}

/*页面上画出三角形{end}*/

/*矩形圆角{begin}*/
._border-radius(@radius:5px){
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}

.border-radius{
  width: 100px;
  height: 40px;
  background-color: green;
  ._border-radius();
}

/*矩形圆角{end}*/

/*相对定位,绝对定位,固定定位*/

.pos(r){
  position: relative;
}

.pos(a){
  position: absolute;
}

.pos(f){
  position: fixed;
}